<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>看板演示</title>
    <base href="/" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="disable-autofill" content="on" />
    <link type="image/x-icon" href="" rel="icon" />
    <style type="text/css">
      .global-loader {
        display: flex;
        justify-content: center;
        align-items: center;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1;
        width: 100%;
        height: 100%;
        opacity: 1;
        will-change: transform;
        transition: opacity 0.5s ease-in-out;
      }

      .global-loader-fade-in {
        will-change: transform;
        opacity: 0;
      }

      .global-loader-hidden {
        display: none;
      }

      .global-loader h1 {
        font-family: 'Helvetica Neue', Helvetica, sans-serif;
        font-weight: normal;
        font-size: 18px;
        letter-spacing: 0.04rem;
        white-space: pre;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        background-image: repeating-linear-gradient(to right, #f44336, #9c27b0, #3f51b5, #03a9f4, #009688, #8bc34a, #ffeb3b, #ff9800);
        background-size: 750% auto;
        background-position: 0 100%;
        animation: gradient 20s infinite;
        animation-fill-mode: forwards;
        animation-timing-function: linear;
      }

      .night-bg {
        background-color: #141414;
      }

      @keyframes gradient {
        0% {
          background-position: 0 0;
        }

        100% {
          background-position: -750% 0;
        }
      }
    </style>
    <!--
    参考https://www.cdnplanet.com/blog/faster-google-webfonts-preconnect/
    没用到谷歌字体可以删除
    <link rel="preconnect" href="https://fonts.gstatic.com">
  -->
    <!--
    谷歌字体
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
  -->
    <!--谷歌materialIcon ，如果你没用material icons可以删除-->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
  </head>
  <body>
    <app-root></app-root>
    <div id="globalLoader" class="global-loader">
      <h1>loading...</h1>
    </div>
  </body>
  <script>
    const isNight = window.localStorage.getItem('IsNightKey');
    if (isNight === 'true') {
      document.getElementById('globalLoader').className += ' night-bg';
    }
  </script>
</html>
